<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper height="423" :list="list"></u-swiper>
		</view>
		<!-- 介绍老师 -->
		<view class="introduce">
			<view class="des">
				<view class="left">
					<view class="avatar">
						<u-avatar size="131" :src="teacherDetail.bareheadedPhoto"></u-avatar>
						<p>ID：{{teacherDetail.code||'--'}}</p>
					</view>
					<view class="name">
						<view class="">
							<text
								style="font-size: 34rpx;font-weight: bold;color: #333333;">{{teacherDetail.realName}}</text>
							<image v-if="teacherDetail.gender==2" style="width: 31rpx;
							
							height: 31rpx;margin: 0 19rpx 0 25rpx; vertical-align: middle;" src="/static/image/women.png" mode="">
							</image>
							<image v-if="teacherDetail.gender==1" style="width: 31rpx;
							
							height: 31rpx;margin: 0 19rpx 0 25rpx; vertical-align: middle;" src="/static/image/man.png" mode="">
							</image>
							<text
								style="font-size: 28rpx;color: #333333;">{{teacherDetail.categoryList[0].categoryName||'--'}}</text>
						</view>
						<p class="school">{{teacherDetail.graduateSchool||'-'}}-{{teacherDetail.speciality||'-'}} </p>
						<view style="display: flex; align-items: center;">
							<p class="education">
								{{teacherDetail.categoryList[teacherDetail.categoryList.length-1].categoryName}}
							</p>
						</view>
					</view>
				</view>
				<view class="right">
					<view @tap="clici">
						<image style="margin-right: 7rpx;" src="/static/image/rz.png" mode=""></image>
						<text>{{teacherDetail.certification?'已认证':'未认证'}}</text>
					</view>
					<!-- <view v-if="!teacherDetail.certification">
						<image style="margin-right: 7rpx;" src="/static/image/rz.png" mode=""></image>
						<text>未认证</text>
					</view> -->
					<view style="margin-top: 47rpx;">
						<image style="margin-right: 7rpx;width: 15rpx;
					height: 19rpx;" src="/static/image/address.png" mode=""></image>
						<text style="color: #000;">{{teacherDetail.distance||'--'}}</text>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="time-item">
					<image
						src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/schNum.png"
						mode=""></image>
					<p>学生数</p>
					<text>{{teacherDetail.studentNum||'0'}}位</text>
				</view>
				<view class="time-item">
					<image src="/static/image/time.png" mode=""></image>
					<p>授课总时长</p>
					<text>{{teacherDetail.sumClassHour||'0'}}h</text>
				</view>
				<view class="time-item">
					<image
						src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/pj.png"
						mode=""></image>
					<p>平均授课时长</p>
					<text>{{teacherDetail.avgClassHour||'0'}}h</text>
				</view>
			</view>

			<view class="list">
				<!-- 基本信息 -->
				<view class="" v-if="teacherDetail.isOpen==1">
					<view class="Basic">
						<view style="position: relative;display: flex;align-items: center;">
							<image style="width: 42rpx;height: 23rpx; vertical-align: middle;"
								src="../../static/image/bgc.png" mode=""></image>
							<text class="text" style="position: absolute;left: 26rpx;top: -14rpx;">基本信息</text>
						</view>
						<view class="contain">
							<text style="margin-right:47rpx;">籍贯:{{teacherDetail.nativePlace||'--'}}</text>
							<text style="margin-right: 34rpx;">教龄:{{teacherDetail.lengthOfTeaching||'--'}}年</text>
							<text>出生年份:{{teacherDetail.birth||'--'}}</text>
						</view>
					</view>
					<view class="Basic">
						<view style="position: relative;display: flex;align-items: center;">
							<image style="width: 42rpx;height: 23rpx; vertical-align: middle;"
								src="../../static/image/bgc.png" mode=""></image>
							<text class="text" style="position: absolute;left: 26rpx;top: -14rpx;">自我简介</text>
						</view>
						<view class="contain" style="margin-top: 40rpx;">
							<p>{{teacherDetail.introduction}}
							</p>
						</view>
					</view>
					<view class="Basic">
						<view style="position: relative;display: flex;align-items: center;">
							<image style="width: 42rpx;height: 23rpx; vertical-align: middle;"
								src="../../static/image/bgc.png" mode=""></image>
							<text class="text" style="position: absolute;left: 26rpx;top: -14rpx;">教学经历</text>
						</view>
						<view style=" padding-left: 38rpx;">
							<view v-for="item in teacherDetail.teachHistoryList" :key="item.id"
								style="padding-top: 15rpx;">
								<text>{{item.teachingStart}}-{{item.teachingEnd}}</text>
								<p style="margin-top: 15rpx;">{{item.teachingHistory}}
								</p>
							</view>
							<!-- <view v-for="item in teacherDetail.teachHistoryList" :key="item.id">
								<text>{{item.teachingStart}}-{{item.teachingEnd}}</text>
								<!-- <view>{{item.teachingHistory}}
								</view> -->
						</view>
					</view>
				</view>
				<view v-else class="dis" style="height: 76rpx;margin-top: 70rpx;text-align: center;display: flex;align-items: center;justify-content: center;
background: #FBEDEA;
opacity: 0.74;
border-radius: 20rpx;">
					<image style="width: 37rpx;height: 37rpx;margin-right: 12rpx;" src="../../static/copy/display.png" mode=""></image>
					<text style="font-size: 24rpx;color: #FF7257;font-weight: 800y;">基本信息不可见</text>
				</view>
				<view class="Basic">
					<view style="position: relative;display: flex;align-items: center;">
						<image style="width: 42rpx;height: 23rpx; vertical-align: middle;"
							src="../../static/image/bgc.png" mode=""></image>
						<text class="text" style="position: absolute;left: 26rpx;top: -14rpx;">授课类别</text>
					</view>
					<view class="contain" style="padding-left: 14rpx;">
						<view class="class" v-for="item in teacherDetail.teacherCategoryConfigVOList"
							:key="item.teachLv">
							{{item.teachSubjectDetail}}
						</view>
					</view>
				</view>
				<view class="Basic">
					<view style="position: relative;display: flex;align-items: center;">
						<image style="width: 42rpx;height: 23rpx; vertical-align: middle;"
							src="../../static/image/bgc.png" mode=""></image>
						<text class="text" style="position: absolute;left: 26rpx;top: -14rpx;">授课区域</text>
					</view>
					<view class="contain" style="padding-left: 14rpx;">
						<view class="class" v-for="item in teacherDetail.teachCountyVOList" :key="item.id">
							{{item.areasName}}
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<view class="yuyue">
					<view class="img">
						<view v-if="teacherDetail.isCollect==0" class="img-item" @tap="like">
							<image src="/static/image/yishoucang.png" mode=""></image>
							<p>收藏</p>
						</view>
						<view v-if="teacherDetail.isCollect==1" class="img-item" @tap="like">
							<image
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/like.png"
								mode=""></image>

							<p>取消收藏</p>
						</view>
						<view class="img-item" style="position: relative;" @tap="shine">
							<image
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/shine.png"
								mode=""></image>
							<p>分享</p>
							<!-- 		<button
								style="position: absolute;top: 2rpx; border-radius: 50%;opacity: 0; width: 60rpx; height: 60rpx; right: 1rpx; background-color:transparent;"
								type='default' open-type='share' /> -->
						</view>
						<view class="img-item" @tap="zx(teacherDetail)" v-if="!type">
							<image
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/zx.png"
								mode=""></image>
							<p>咨询</p>
						</view>
					</view>
					<view class="btn" @tap="yuyue(teacherDetail)" v-if="!type">
						预约老师
					</view>
					<view class="btn" @tap="zx(teacherDetail)" v-if="type">
						咨询
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="50">
			<view class="rzxx">
				<text>认证信息</text>
				<view class="rz-list">
					<view>
						教师资格证
					</view>
					<image style="width: 44rpx;height: 44rpx;" src="../../static/image/duigou.png" mode=""></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="shows" mode="center" width="700">
			<view style="padding-bottom: 50rpx;">
				<demo-block title="栗子海报">
					<l-painter css="padding-bottom: 100rpx;width:700rpx" @fail="fail" @done="done" pathType="url"
						ref="poster" performance>
						<l-painter-view css="margin-top: 40rpx; display: inline-block">
						</l-painter-view>
						<l-painter-view
						 css=" margin:30rpx;padding: 32rpx; background: #fff; border-radius: 16rpx;width:580rpx;height:750rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15);" 
							>
							<l-painter-image
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231009143259.jpg"
							css="object-fit: fill; object-position: 50% 50%; width: 100%; height: 750rpx;" />
							<l-painter-view
								css="color: #FF0000;position:absolute;  font-weight: bold; font-size: 28rpx; line-height: 1em;top:36%;left:-2.5%;">
								<l-painter-image :src="teacherDetail.bareheadedPhoto"
									css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 100rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 100rpx; border-radius: 50%;" />
							</l-painter-view>
							<l-painter-view
								css="color: #b80d0f;position:absolute;  font-weight: bold; font-size: 34rpx; line-height: 1em;top:42%;left:24%;">
								<l-painter-text
									css="width:155rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 1;"
									:text="teacherDetail.realName" />
							</l-painter-view>
							<l-painter-view
								css="color: #b80d0f;position:absolute;  font-weight: bold; font-size: 26rpx; line-height: 1em;top:43%;left:42%;">
								<l-painter-text
									css="width:280rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 1;"
									:text="teacherDetail.graduateSchool" />
							</l-painter-view>
							<l-painter-view
								css="color: #7c726c;position:absolute; font-size: 22rpx; line-height: 1em;top:48%;left:24%;line-height:35rpx;">
								<l-painter-text
									css="width:375rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 3;"
									:text="teacherDetail.introduction" />
							</l-painter-view>
						</l-painter-view>
						</l-painter-view>
						<l-painter-view css="margin-top: 32rpx; font-size: 26rpx;top:60%;left:17%;position:absolute;">
							<l-painter-image :src="img"
								css="object-fit: fill; object-position: 50% 50%; width: 140rpx; height: 140rpx;border-radius:20rpx" />
						</l-painter-view>
					</l-painter>
					<view style="padding: 0 50rpx;">
						<button style="height: 81rpx;
				background: #F87579;
				border-radius: 41rpx;color: #ffffff;" type="default" @click="save">保存</button>
					</view>
				</demo-block>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				teacherId: '',
				teacherDetail: {},
				type: '',
				shows: false,
				picture: '',
				picture2: '',
				teacherDetail: {},
				img: '',
				teacherId: '',
				path: ''
			};
		},
		onLoad(options) {

			console.log(options, 'qq');
			uni.showLoading({
				title: '加载中'
			})
			if (options.scene) {
				this.teacherId = options.scene
			} else if (options.teacherId) {
				this.teacherId = options.teacherId
			}
			this.type = options.type
			// this.teacherId = options.teacherId
			this.getDetail()
			this.teacherImg()
			setTimeout(function() {
				uni.hideLoading();
			}, 2000);
		},
		onShareAppMessage() {
			return {
				title: '老师详情',
				path: `/pages/contradict/teacherDetail?teacherId=${this.teacherId}`,
				imgUrl: ''
			}
		},
		onShareTimeline() {
			return {
				title: '老师详情',
				path: `/pages/contradict/teacherDetail?teacherId=${this.teacherId}`,
				imageUrl: ''
			};
		},
		methods: {
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
			},
			async teacherImg() {
				this.img = await this.$u.api.teacherImg({
					teacherId: this.teacherId
				})
			},
			save() {
				let that = this
				that.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						that.picture2 = res.tempFilePath
						that.saveImage()
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},
			// 保存图征
			saveImage() {
				let that = this

				uni.saveImageToPhotosAlbum({
					filePath: that.picture2,
					success(res) {
						console.log(res);
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
					fail(e) {
						console.log(e);
					}
				});

			},
			clici() {
				console.log(111);
				this.show = true
			},
			shine() {
				// uni.navigateTo({
				// 	url: `./shine?teacherId=${this.teacherId}`
				// })
				this.shows = true
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(()=>{
					uni.hideLoading();
				},1000)
			},
			yuyue(teacherDetail) {
				uni.navigateTo({
					url: `/pages/contradict/appointment?teacherDetail=${JSON.stringify(teacherDetail)}`
				})
			},
			zx(teacherDetail) {
			uni.navigateTo({
				url:'/pages/my/kefu'
			})
			},
			renzeng() {

			},
			async like() {
				if (this.teacherDetail.isCollect == 0) {
					const res = await this.$u.api.like({
						collectType: 1,
						objId: this.teacherId
					})
					this.$u.toast('收藏成功')
				} else {
					const res = await this.$u.api.delLike({
						collectType: 1,
						objId: this.teacherId
					})
					this.$u.toast('取消成功')
				}

				setTimeout(()=>{
					this.getDetail()
				},500)
			},
			async getDetail() {

				this.teacherDetail = await this.$u.api.getTeacUnfo({
					teacherId: this.teacherId,
					lat: uni.getStorageSync('lat'),
					lgt: uni.getStorageSync('lgt')
				})
				if (this.teacherDetail.distance >= 1000) {
					this.teacherDetail.distance = (this.teacherDetail.distance / 1000).toFixed(2) + 'km'
				} else if (this.teacherDetail.distance < 1000) {
					this.teacherDetail.distance = this.teacherDetail.distance + 'm'
				}
				this.list = this.teacherDetail.demeanour
				this.list = this.list.split(',')
			}
		}
	}
</script>

<style lang="scss">
	.rzxx {
		// height: 537rpx;
		background-color: #fff;
		padding: 45rpx 0 40rpx;
		text-align: center;

		text {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #231815;
		}

		.rz-list {
			position: relative;
			margin-top: 70rpx;
			padding: 0 50rpx;
			justify-content: space-between;
			display: flex;
			align-items: center;



			&::after {
				position: absolute;
				content: '';
				display: block;
				width: 650rpx;
				bottom: -43rpx;
				box-sizing: border-box;
				height: 1rpx;
				background: #E5E5E5;
			}

			&:nth-child(3)::after {
				width: 0 !important;
			}
		}

		.foot {
			// margin-top: 105rpx;
			margin: 105rpx 30rpx 0;
			height: 72rpx;
			background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
			border-radius: 36rpx;
			text-align: center;
			line-height: 72rpx;

			.sub {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.introduce {
		padding-bottom: 200rpx;

		.des {
			padding: 0 30rpx;
			height: 198rpx;
			// background-color: pink;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.left {
				// position: relative;
				display: flex;

				.avatar {
					margin-right: 30rpx;
					position: relative;
					top: -20rpx;
					text-align: center;

					p {
						font-size: 22rpx;
						color: #333333;
						margin-top: 10rpx;
					}
				}

				.name {

					// display: flex;
					view {
						display: flex;
						align-items: center;
					}

					.school {
						margin-top: 20rpx;
						margin-bottom: 28rpx;
						font-size: 26rpx;
						color: #333333;
					}

					.education {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.right {
				margin-top: 10rpx;

				view {
					display: flex;
					align-items: center;

					image {
						vertical-align: middle;
						width: 25rpx;
						height: 25rpx;
					}

					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6054;
					}
				}
			}
		}

		.time {
			margin-top: 46rpx;
			// padding-left: 70rpx;
			// padding: 0 95rpx;
			justify-content: center;
			display: flex;

			image {
				width: 68rpx;
				height: 68rpx;
			}

			.time-item {
				text-align: center;
				position: relative;
				margin-right: 154rpx;

				p {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 13rpx;
				}

				text {


					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				&::after {
					content: '';
					display: block;
					width: 1rpx;
					height: 97rpx;
					position: absolute;
					top: 40rpx;
					right: -70rpx;
					background: #DCDCDC;
				}

				&:nth-child(3)::after {
					width: 0 !important;

				}

				&:nth-child(3) {
					margin-right: 0;
				}
			}
		}

		.text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333
		}

		.list {
			padding: 0 59rpx 0 30rpx;

			.Basic {

				margin-top: 72rpx;

				.contain {
					display: flex;
					align-items: center;
					margin-top: 50rpx;
					padding-left: 38rpx;

					.class {
						width: 117rpx;
						height: 44rpx;
						background: #FBEDEA;
						border-radius: 22rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 23rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6B55;
						margin-right: 15rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.foot {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 146rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(145, 145, 145, 0.32);

			.yuyue {
				display: flex;
				align-items: center;
				padding: 0 52rpx 0 26rpx;
				height: 146rpx;
				justify-content: space-between;

				.img {
					display: flex;
					align-items: center;

					.img-item {
						margin-right: 25rpx;
						text-align: center;

						p {
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #747474;
						}
					}
				}

				.btn {
					width: 228rpx;
					height: 77rpx;
					background: linear-gradient(90deg, #FF8D5F, #FF6A55);
					border-radius: 39rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 77rpx;
				}

				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}
	}
</style>